<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Form 表单1</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<script src="../static/js/zh-cn.js"></script>
	<!-- <script src="../static/js/date.format.js"></script> -->
	
	<script src="../static/js/icons-vue.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style type="text/css">
.form-cell{
	width: 800px;
}
.w300{
	width: 300px;
}
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	overflow: hidden;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 100px;
	height: 100px;
	text-align: center;
	border-radius: 6px;
	cursor: pointer;
}
.el-upload-list--picture-card {
	--el-upload-list-picture-card-size: 100px;
}
.el-upload--picture-card {
	--el-upload-picture-card-size: 100px;
}
</style>
</head>
<body>
<div id="app" class="">
	<a href='Form1.html' class='layui-btn'>典型表单，行内表单，对齐方式，表单校验</a>
	<a href='Form2.html' class='layui-btn0'>自定义校验规则，添加/删除表单项，数字类型验证，尺寸控制，可访问性</a>
	
	<el-divider content-position="left">典型表单</el-divider><!-- =============================================================== -->
	<p class="desc">最基础的表单包括各种输入表单项，比如input、select、radio、checkbox等。</p>
	<p class="desc">在每一个 form 组件中，你需要一个 form-item 字段作为输入项的容器，用于获取值与验证值。</p>
	<el-form ref="form" :model="form" label-width="120px" class="form-cell">
		<el-form-item label="活动名称">
			<el-input v-model="form.name"></el-input>
		</el-form-item>
		<el-form-item label="活动区">
			<el-select v-model="form.region" placeholder="请选择您的区域">
				<el-option label="上海" value="shanghai"></el-option>
				<el-option label="北京" value="beijing"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="活动时间">
			<el-col :span="11">
				<el-date-picker v-model="form.date1" type="date" placeholder="选择日期" style="width: 100%" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
			</el-col>
			<el-col :span="2" style="text-align: center;">
				<span class="text-gray-500">-</span>
			</el-col>
			<!-- <el-col class="line" :span="2">-</el-col> -->
			<el-col :span="11">
				<el-time-picker v-model="form.date2" placeholder="选择时间" style="width: 100%" format="HH:mm:ss" value-format="HH:mm:ss"></el-time-picker>
			</el-col>
		</el-form-item>
		<el-form-item label="立即开始">
			<el-switch v-model="form.delivery"></el-switch>
		</el-form-item>
		<el-form-item label="活动类型">
			<el-checkbox-group v-model="form.type">
				<el-checkbox label="在线活动" name="type"></el-checkbox>
				<el-checkbox label="推广活动" name="type"></el-checkbox>
				<el-checkbox label="线下活动" name="type"></el-checkbox>
				<el-checkbox label="短曝光" name="type"></el-checkbox>
			</el-checkbox-group>
		</el-form-item>
		<el-form-item label="相关资源">
			<el-radio-group v-model="form.resource">
				<el-radio label="赞助"></el-radio>
				<el-radio label="会场"></el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item label="活动形式">
			<el-input v-model="form.desc" type="textarea"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="onSubmit">创建</el-button>
			<el-button>取消</el-button>
		</el-form-item>
	</el-form>
	
	<el-divider content-position="left">行内表单</el-divider><!-- =============================================================== -->
	<p class="desc">当垂直方向空间受限且表单较简单时，可以在一行内放置表单。</p>
	<p class="desc">通过设置 inline 属性为 true 可以让表单域变为行内的表单域</p>
	<el-form :inline="true" :model="formInline" class="demo-form-inline">
		<el-form-item label="User：">
			<el-input v-model="formInline.user" placeholder="Approved by"></el-input>
		</el-form-item>
		<el-form-item label="地区：">
			<el-select v-model="formInline.region" placeholder="Activity zone">
				<el-option label="上海" value="shanghai"></el-option>
				<el-option label="北京" value="beijing"></el-option>
				<el-option label="深圳" value="shenzhen"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="onSubmit2">Query</el-button>
		</el-form-item>
	</el-form>
	
	<el-divider content-position="left">对齐方式</el-divider><!-- =============================================================== -->
	<p class="desc">根据你们的设计情况，来选择最佳的标签对齐方式。</p>
	<p class="desc">通过设置 label-position 属性可以改变表单域标签的位置，可选值为 top、left， 当设为 top 时标签会置于表单域的顶部</p>
	<el-radio-group v-model="labelPosition" size="small">
		<el-radio-button label="left">Left</el-radio-button>
		<el-radio-button label="right">Right</el-radio-button>
		<el-radio-button label="top">Top</el-radio-button>
	</el-radio-group>
	<div style="margin: 20px"></div>
	<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" class="form-cell">
		<el-form-item label="Name">
			<el-input v-model="formLabelAlign.name"></el-input>
		</el-form-item>
		<el-form-item label="Activity zone">
			<el-input v-model="formLabelAlign.region"></el-input>
		</el-form-item>
		<el-form-item label="Activity form">
			<el-input v-model="formLabelAlign.type"></el-input>
		</el-form-item>
	</el-form>
	
	<el-divider content-position="left">表单校验</el-divider><!-- =============================================================== -->
	<p class="desc">Form 组件允许你验证用户的输入是否符合规范，来帮助你找到和纠正错误。</p>
	<p class="desc">Form 组件提供了表单验证的功能，只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。 更多高级用法可参考 async-validator。</p>
	<el-form ref="ruleForm" :model="formData" :rules="rules" label-width="120px" :status-icon="true" :scroll-to-error="true" class="demo-ruleForm form-cell">
		<el-form-item label="活动名称" prop="name" :required="true">
			<el-input v-model="formData.name" class="w300" minlength="3" maxlength="5" show-word-limit></el-input>
			<span style="color: red;">&nbsp; * 提示文本</span>
		</el-form-item>
		<el-form-item label="开办单位" prop="name" :required="true">
			<el-input v-model="formData.cell" class="w300" disabled></el-input>
		</el-form-item>
		<el-form-item label="活动区域" prop="region">
			<el-select v-model="formData.region" filterable class="w500" placeholder="Activity zone">
				<el-option label="上海" value="shanghai"></el-option>
				<el-option label="北京" value="beijing"></el-option>
			</el-select>
		</el-form-item>
		
		<el-form-item label="具体地址" prop="addr">
			<el-input v-model="formData.address" placeholder="Please input" class="input-with-select">
				<template #prepend>
					<el-select v-model="formData.addr" placeholder="Select" style="width: 110px">
						<el-option label="上海" value="shanghai"></el-option>
						<el-option label="北京" value="beijing"></el-option>
					</el-select>
				</template>
			</el-input>
		</el-form-item>
		
		<el-form-item label="活动时间" required>
			<el-col :span="11">
				<el-form-item prop="date1">
					<el-date-picker v-model="formData.date1" type="date" placeholder="Pick a date" style="width: 100%" format="YYYY-MM-DD" value-format="YYYY-MM-DD"></el-date-picker>
				</el-form-item>
			</el-col>
			<el-col :span="2" style="text-align: center;">
				<span class="text-gray-500">-</span>
			</el-col>
			<el-col :span="11">
				<el-form-item prop="date2">
					<el-time-picker v-model="formData.date2" placeholder="Pick a time" style="width: 100%" format="HH:mm:ss" value-format="HH:mm:ss"></el-time-picker>
				</el-form-item>
			</el-col>
		</el-form-item>
		<el-form-item label="立即开始" prop="delivery">
			<el-switch v-model="formData.delivery"></el-switch>
		</el-form-item>
		<el-form-item label="活动类型" prop="type">
			<el-checkbox-group v-model="formData.type">
				<el-checkbox label="在线活动" name="type"></el-checkbox>
				<el-checkbox label="推广活动" name="type"></el-checkbox>
				<el-checkbox label="线下活动" name="type"></el-checkbox>
				<el-checkbox label="短曝光" name="type"></el-checkbox>
			</el-checkbox-group>
		</el-form-item>
		<el-form-item label="相关资源" prop="resource">
			<el-radio-group v-model="formData.resource">
				<el-radio label="赞助"></el-radio>
				<el-radio label="会场"></el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item label="参与人数" prop="num">
			<el-input-number v-model="formData.num" :min="1" :max="10" @change="handleChange"></el-input-number>
		</el-form-item>
		<el-form-item label="费用" prop="money">
			<el-input v-model="formData.money" class="w300"></el-input>
			<span style="color: red;">&nbsp; * 使用效验方法进行效验。</span>
		</el-form-item>
		<el-form-item label="费用2" prop="money2">
			<el-input-number v-model="formData.money2" :precision="2" :step="0.1" :max="99998888" :controls="false" style="width: 200px;"></el-input-number>
			<span style="color: red;">&nbsp; * 使用指定文本框限制。</span>
		</el-form-item>
		<el-form-item label="费用3" prop="money3">
			<el-input v-model="formData.money3" class="w300"></el-input>
			<span style="color: red;">&nbsp; * 使用效验方法进行效验（提交方法中注入效验方法）。</span>
		</el-form-item>
		<el-form-item label="活动简介" prop="desc">
			<el-input v-model="formData.desc" type="textarea" rows=3 maxlength="300" placeholder="请输入备注信息..." show-word-limit></el-input>
		</el-form-item>
		
		<el-form-item label="拜访开始照片" prop="img_start">
			<div style="display: flex; align-items: center">
				<el-upload ref="upload1" class="avatar-uploader" action="./upfile.php"
				:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
					<el-image v-if="formData.img_start" style="width: 105px; height: 100px" :src="formData.img_start" :fit="fit"></el-image>
					<div v-else>
						<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
					</div>
				</el-upload>
			</div>
			<span style="color: red;">&nbsp; * 上传 2M 内的图片。</span>
		</el-form-item>
		<el-form-item label="其他照片" prop="img_other">
			<div style="display: flex; align-items: center">
				<el-upload ref="upload3" class="avatar-uploader" action="./upfile.php" multiple list-type="picture-card" :on-success="handleAvatarSuccess33"
				:before-upload="beforeAvatarUpload" :on-preview="handlePictureCardPreview1" :on-remove="handleRemove2" :limit="3" :on-exceed="handleExceed3">
					<el-icon class="avatar-uploader-icon">
						<Plus />
					</el-icon>
				</el-upload>
			</div>
		</el-form-item>
		
		<el-form-item>
			<el-button type="primary" @click="submitForm('ruleForm')">创建</el-button>
			<el-button @click="resetForm('ruleForm')">重置</el-button>
		</el-form-item>
	</el-form>
	<div class="h500"></div>
</div>
</body>
<script>
const Main = {
	data() {
		return {
			isTrue: true,
			checked1: true,
			checked2: true,
			checked3: false,
			checked4: false,
			form: {
				name: '',
				region: '',
				date1: '',
				date2: '',
				delivery: true,
				type: ["在线活动", '推广活动'],
				resource: '赞助',
				desc: '',
			},
			formInline: {
				user: '',
				region: '',
			},
			labelPosition: 'right',
			formLabelAlign: {
				name: '',
				region: '',
				type: '',
			},
			
			fileList3: null,
			formData: {
				name: '测试活动',
				cell: '本单位（本公司）',
				region: 'beijing',
				addr: '',
				address: "XX区，XX街道，XXXX号XXX室",
				date1: '2022-06-20',
				date2: '15:05:02',
				delivery: false,
				type: ["在线活动", "推广活动"],
				resource: '赞助',
				num: 3,
				money: null,
				money2: null,
				money3: null,
				desc: '测试',
				img_start: '',
				img_other: '',
			},
			rules: {
				name: [
					{required: true,	message: '请输入活动名称',		trigger: 'blur',},
					{min: 3,max: 5,		message: '长度为3 ~ 5',			trigger: 'blur',},
				],
				region: [
					{required: true,	message: '请选择活动区域',		trigger: 'change',},
				],
				addr: [
					{required: true,	message: '请选择活动地区',		trigger: 'change',},
				],
				address: [
					{required: true,	message: '具体地址必填',		trigger: 'blur',},
				],
				date1: [
					{required: true,	message: '请选择一个日期',		trigger: 'change',		type: 'date',},
				],
				date2: [
					{required: true,	message: '请选个时间',			trigger: 'change',},
				],
				type: [
					{required: true,	message: '请选择至少一种活动类型',	trigger: 'change',	type: 'array',},
				],
				resource: [
					{required: true,	message: '请选择活动资源',		trigger: 'change',},
				],
				num: [
					{required: true,	message: '至少1人',				trigger: 'change',},
				],
				money: [
					// {required: true,	message: '必填项',			trigger: 'blur',},
					// {type: 'number',	message: '只能是数字',			trigger: 'blur',},
					{validator: this.validateMoney2,					trigger: 'blur',},
				],
				money2: [
					{required: true,	message: '必填项',			trigger: 'blur',},
				],
				money3: [
					{}
				],
				desc: [
					{required: true,	message: '请输入活动表单',		trigger: 'blur',},
				],
				img_start: [
					{required: true,	message: '拜访开始照片',		trigger: 'blur',},
				],
				// 指示要使用的验证器的类型。识别的类型值是:
				// string: Must be of type string. This is the default type.
				// number: Must be of type number.
				// boolean: Must be of type boolean.
				// method: Must be of type function.
				// regexp: Must be an instance of RegExp or a string that does not generate an exception when creating a new RegExp.
				// integer: Must be of type number and an integer.
				// float: Must be of type number and a floating point number.
				// array: Must be an array as determined by Array.isArray.
				// object: Must be of type object and not Array.isArray.
				// enum: Value must exist in the enum.
				// date: Value must be valid as determined by Date
				// url: Must be of type url.
				// hex: Must be of type hex.
				// email: Must be of type email.
				// any: Can be any type.
			},
		}
	},
	mounted(){
		this.$nextTick(function () {
			// 仅在整个视图都被渲染之后才会运行的代码
			// console.log(99999999);
			console.log(this.rules);
			
		})
	},
	methods:{
		validateMoney(rule, value, callback){
			if (!value) {
				return callback(new Error('不能为空'));
			}else{
				let str = "0123456789.";
				for(var i = 0; i < value.length; i++){
					if(!str.includes(value[i])){
						return callback(new Error('必须是浮点数据'));
					}
				}
				callback();
			}
		},
		validateMoney2(rule, value, callback){
			// console.log(value);
			if (!value) {
				return callback(new Error('不能为空'));
			}else{
				let reg = /^[0-9]+\.{0,1}[0-9]{0,2}$/;
				if(reg.test(value)){
					callback();
				}else{
					return callback(new Error('必须是金额类型的数据（最多保留2位小数）'));
				}
			}
		},
		//在图片上传之前做的操作
		beforeAvatarUpload(file) {
			// console.log(file);
			// const isImage = file.type === 'image/jpeg'
			const isImage = file.type === 'image/png' || file.type === 'image/jpeg'
			const isLt2M = file.size / 1024 / 1024 < 2
		
			if (!isImage) {
				this.$message.error('文件必须为 JPG 或 PNG 格式!')
			}
			if (!isLt2M) {
				this.$message.error('文件大小不能超过2MB!')
			}
			return isImage && isLt2M
		},
		//拜访开始照片 上传成功触发
		handleAvatarSuccess(res, file, fileList) {
			// console.log(res, file, fileList);
			this.formData.img_start = res.path;
		},
		
		handleAvatarSuccess33(res, file, fileList) {
			// this.imageUrl = URL.createObjectURL(file.raw)
			this.fileList3 = fileList;
			// console.log("res:", res);
			// console.log("file:", file);
			// console.log("fileList:", fileList);
			// fileList.forEach((v) => {
			// 	console.log(v.response.data.path);
			// })
		},
		handleRemove2(file, fileList) {
			console.log("handleRemove2:", file, fileList)
		},
		handleExceed3(files, fileList) {
			// this.$message.warning(`最多3张图片, 你选择了 ${files.length} 张, 上传后为 ${files.length + fileList.length} 张。`);
			this.$message.warning(`最多3张图片！`);
		},
		handlePictureCardPreview1(file) {
			// console.log("handlePictureCardPreview1:", file)
			this.img_path = file.url
			this.show_img = true
		},
		onSubmit() {
			console.log('submit!')
			console.log(this.form)
		},
		onSubmit2() {
			console.log('submit2!')
			console.log(this.formInline)
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				this.rules.money3[0].validator = this.validateMoney2;
				if (valid) {
					console.log('submit success!');
					console.log(this.formData)
				} else {
					console.log('error submit!!')
					return false
				}
			})
		},
		resetForm(formName) {
			this.$refs[formName].resetFields()
		},
		handleChange(item){
			console.log(item)
		},
	}
}
const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
// app.use(ElementPlus);
app.use(ElementPlus, {locale: ElementPlusLocaleZhCn,});
let vm = app.mount("#app");

</script>
</html>
